<template>
  <div>
    <div class="content">Vue 2 + ECharts 示例</div>
    <ECharts :options="chartOptions" />
  </div>
</template>

<script>
import ECharts from "@/components/ECharts.vue"; // 引入 ECharts 组件
import { randomNum } from "@/utils/random.js";
export default {
  components: {
    ECharts,
  },
  name: "indexVue",

  data() {
    return {
      chartOptions: {
        title: {
          text: "动态排序柱状图",
        },
        tooltip: {},
        xAxis: {
          max: "dataMax",
        },
        yAxis: {
          type: "category",
          data: ["A", "B", "C", "D", "E"],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
        },
        series: [],
        animationDuration: 3000,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      },
    };
  },

  mounted() {
    setInterval(() => {
      this.getSeries(1, 5, randomNum());
    }, 1000);
  },
  methods: {
    getSeries(numSeries, numDataPoints, maxRandomValue) {
      let list = Array.from({ length: numSeries }).map(() => ({
        realtimeSort: true,
        type: "bar",
        data: Array.from({ length: numDataPoints }).map(() => Math.floor(Math.random() * maxRandomValue)),
        label: {
          show: true,
          position: "right",
          valueAnimation: true,
        },
      }));
      this.chartOptions.series = list;
    },
  },
};
</script>

<style scoped>
.content {
  text-align: left;
}
</style>
